<!--
 * @Author: 偻儸小卒[EdisonLiu_]
 * @Date: 1970-01-01 08:00:00
 * @LastEditors: 偻儸小卒[EdisonLiu_]
 * @LastEditTime: 2020-03-23 14:30:03
 * @Description: 
 -->
<template>
  <div >
     
        <main>
            <div>
              <label>当前时间：{{ datetime }}</label>
              <button @click="get_time">刷新</button>
            </div>

            <div>
              时间戳对比
              <br />例1： 1564837873-1565701907
              <br />例2：1564837873123-1565701907515
              <input
                type="text"
                placeholder="请输入时间戳 "
                v-model="timestamp"
              />
              <button @click="cal_stamp">计算</button>
            </div>

            <div>
              时间：
              <span>{{ new_timetodate }}</span>
            </div>
            <div v-if="difference">
              毫秒差：
              <span>{{ difference }}</span
              >秒
            </div>
            <div v-if="diffdate">
              时间差：
              <span>{{ diffdate.days }}</span
              >天 <span>{{ diffdate.hours }}</span
              >时 <span>{{ diffdate.minutes }}</span
              >分 <span>{{ diffdate.seconds }}</span
              >秒
            </div>
        
        </main>
      </div>
    
</template>
<script>

export default {
  name: "index",
   components: {
  },
  data() {
    return {
     datetime: "",
      timestamp: "",
      new_timetodate: "",
      difference: "",
      diffdate: "",
      
    };
  },
  created: function() {
    this.get_time();
    
  },
  methods: {
      get_time() {
      this.datetime = parseInt(new Date().getTime() / 1000);
    },    cal_stamp() {
      let timestamp;
      let reg = RegExp(/\-/);

      if (reg.test(this.timestamp)) {
        this.timestamp = this.timestamp.replace(/\s/g, "");
        timestamp = this.timestamp.split("-");
      } else {
        timestamp = this.timestamp;
      }

      if (timestamp instanceof Array) {
        let new_timetodate = new Array();

        //如果只有10位则为秒级
        //如果有13位则为毫秒
        if (timestamp[0].length > 10) {
          timestamp[0] = parseInt(timestamp[0]);
        } else {
          timestamp[0] = parseInt(timestamp[0]) * 1000;
        }
        if (timestamp[1].length > 10) {
          timestamp[1] = parseInt(timestamp[1]);
        } else {
          timestamp[1] = parseInt(timestamp[1]) * 1000;
        }
        //计算时间差
        if (timestamp[0] >= timestamp[1]) {
          this.difference = parseInt(timestamp[0] - timestamp[1]) / 1000;
        } else {
          this.difference = parseInt(timestamp[1] - timestamp[0]) / 1000;
        }

        this.diffdate = this.stamptodate(parseInt(this.difference));

        timestamp.forEach(element => {
          new_timetodate.push(this.formatDate(element));
        });
        this.new_timetodate = new_timetodate.join("---");
      } else {
        this.difference = 0;
        this.diffdate = 0;
        this.new_timetodate = this.formatDate(timestamp);
      }
    },
    //时间转换
    formatDate: function(value) {
      //如果只有10位则为秒级
      //如果有13位则为毫秒
      if (value.toString().length <= 10) {
        value = parseInt(value) * 1000;
      }
      value = parseInt(value);
      let date = new Date(value);
      let y = date.getFullYear();
      let MM = date.getMonth() + 1;
      MM = MM < 10 ? "0" + MM : MM;
      let d = date.getDate();
      d = d < 10 ? "0" + d : d;
      let h = date.getHours();
      h = h < 10 ? "0" + h : h;
      let m = date.getMinutes();
      m = m < 10 ? "0" + m : m;
      let s = date.getSeconds();
      s = s < 10 ? "0" + s : s;
      let ms = date.getMilliseconds();
      ms = ms < 10 ? "0" + ms : ms;
      return y + "-" + MM + "-" + d + " " + h + ":" + m + ":" + s + " " + ms;
    },
    //秒数转换为 天 时 分 秒
    stamptodate(value) {
      let $data = {};
      $data.days = Math.floor(value / 86400);
      $data.hours = Math.floor((value % 86400) / 3600);
      $data.minutes = Math.floor(((value % 86400) % 3600) / 60);
      $data.seconds = Math.floor(((value % 86400) % 3600) % 60);

      return $data;
    },

  }
};
</script>
